<template>
  <view class="points-page">
    <!-- 积分总览 -->
    <view class="points-header">
      <view class="total-points">
        <text class="label">当前积分</text>
        <text class="value">{{ totalScore }}</text>
        <text class="unit">分</text>
      </view>
    </view>

    <!-- 积分明细 -->
    <scroll-view class="points-list" scroll-y>
      <view class="list-title">积分明细</view>
      <view class="points-item" v-for="(item, index) in scoreList" :key="item.id">
        <!-- 左侧图标和描述 -->
        <view class="item-left">
          <view class="info">
            <text class="title">{{ item.detail + (item.is_add ? '奖励' : '消耗') }}</text>
            <text class="time">{{ formatTime(item.create_time) }}</text>
          </view>
        </view>
        <!-- 右侧积分 -->
        <text class="points-value" :class="{ income: item.is_add }">
          {{ item.is_add ? '+' : '' }}{{ item.change_value }}
        </text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { formatTime } from '../../utils/formatDate'
export default {
  data() {
    return {
      // pointsList: [
      //   {
      //     title: '每日签到奖励',
      //     time: '2023-11-25 08:30',
      //     points: 10,
      //     type: 'income',
      //     icon: '/static/icons/signin.png'
      //   },
      //   {
      //     title: '商品购买奖励',
      //     time: '2023-11-24 15:20',
      //     points: 200,
      //     type: 'income',
      //     icon: '/static/icons/shopping.png'
      //   },
      //   {
      //     title: '积分兑换消耗',
      //     time: '2023-11-23 10:10',
      //     points: 50,
      //     type: 'expense',
      //     icon: '/static/icons/exchange.png'
      //   }
      // ],
      userId: 0,
      scoreList: [],
      totalScore: 0,
      formatTime
    }
  },
  onLoad() {
    this.userId = getApp().globalData.userInfo.id
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getScoreInfoList/' + this.userId,
        header: getApp().globalData.header
      })

      if (res.status != 200) {
        this.$checkStatus(res.status)
        return
      }

      this.scoreList = res.data.list
      this.totalScore = res.data.totalScore
    },

    navigateToRule() {
      uni.navigateTo({
        url: '/pages/points/rule'
      })
    }
  }
}
</script>

<style lang="scss">
.points-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.points-header {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  padding: 40upx 30upx;
  height: 130upx;
  color: #fff;

  .total-points {
    display: flex;
    align-items: baseline;
    margin-bottom: 20upx;

    .label {
      font-size: 32upx;
      margin-right: 20upx;
    }

    .value {
      font-size: 72upx;
      font-weight: bold;
      margin-right: 10upx;
    }

    .unit {
      font-size: 36upx;
      opacity: 0.8;
    }
  }

  .points-rule {
    font-size: 28upx;
    text-align: right;
    opacity: 0.9;
  }
}

.points-list {
  background: #fff;
  border-radius: 30upx 30upx 0 0;
  margin-top: -30upx;
  padding: 30upx;
  box-sizing: border-box;
  height: calc(100vh - 130upx);

  .list-title {
    font-size: 36upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30upx;
  }

  .points-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30upx 0;
    border-bottom: 1upx solid #eee;

    .item-left {
      display: flex;
      align-items: center;

      .type-icon {
        width: 60upx;
        height: 60upx;
        margin-right: 20upx;
      }

      .info {
        display: flex;
        flex-direction: column;

        .title {
          font-size: 32upx;
          color: #333;
          margin-bottom: 10upx;
        }

        .time {
          font-size: 24upx;
          color: #999;
        }
      }
    }

    .points-value {
      font-size: 36upx;
      font-weight: bold;

      &.income {
        color: #f56c6c;
      }

      &:not(.income) {
        color: #67c23a;
      }
    }
  }
}
</style>
